<!--  -->
<template>
  <div class="stu_msg_content" v-if="menu.index">
    <div
      class="stu_head"
      :style="{ 'background-image': `url(${configSite.schoolTit})` }"
    >
      <div class="title" v-html="$t('message.welcomeTips')"></div>
    </div>
    <div class="stu_info">
      <div class="info_avatar">
        <div class="avatar">
          <el-avatar :size="100" :src="circleUrl"></el-avatar>
        </div>
        <el-button
          class="msg_btn"
          plain
          type="primary"
          @click="dialogVisible = true"
        >
          <span>
            <!-- <img class="iconImg" src="@/assets/img/pwd.png" alt="" /> -->
            {{ $t("message.changePsw") }}
          </span>
        </el-button>
        <!-- 切换身份 -->
        <!-- <el-button
          class="SwitchIdentity"
          type="info"
          plain
          @click="dialogSwitch = true"
        >
          <span>
            <img class="iconImg" src="@/assets/img/Switch.png" alt="" />
            {{ $t("message.switchIdentity") }}
          </span>
        </el-button> -->
      </div>
      <div class="info_msg">
        <div class="item">
          <span class="label">{{ $t("message.personal.cnname") }}:</span>
          <div class="main">{{ nameBase }}</div>
        </div>
        <div class="item">
          <span class="label">{{ $t("message.personal.email") }}:</span>
          <div class="main">{{ userInfo.email }}</div>
        </div>
        <div class="item" v-if="userInfo.xtype == 1">
          <span class="label">{{ $t("message.personal.stuNumber") }}:</span>
          <div class="main">{{ userInfo.xh }}</div>
        </div>
        <div class="item" v-if="userInfo.xtype == 1">
          <span class="label">{{ $t("message.personal.passportNo") }}:</span>
          <div class="main">{{ userInfo.passport }}</div>
        </div>
      </div>
    </div>
    <div class="stu_quick_link">
      <div class="link_title">{{ menu.index.name }}</div>
      <div class="link_items">
        <div
          class="item"
          v-for="(item, index) in menu.indexList"
          :key="item.moduleid"
        >
          <span class="word" @click="navagator(item)" :data-index="index">{{
            item.name
          }}</span>
        </div>
      </div>
    </div>
    <!-- 切换学生身份弹窗 -->
    <el-dialog
      :title="$t('message.selectIdentity')"
      :visible.sync="dialogSwitch"
    >
      <el-radio-group
        style="display: flex; flex-direction: column"
        v-model="SwitchValue"
      >
        <el-radio style="margin: 10px" :label="1">本科</el-radio>
        <el-radio style="margin: 10px" :label="2">研究生</el-radio>
        <el-radio style="margin: 10px" :label="3">交换生</el-radio>
      </el-radio-group>
      <div slot="footer">
        <el-button @click="dialogSwitch = false" v-t="'message.btnCancle'"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="SwitchConfirm"
          v-t="'message.btnUpdate'"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改密码弹窗 -->
    <el-dialog
      :title="$t('message.changePsw')"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="30%"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-width="80px"
        label-position="top"
        size="medium"
      >
        <el-form-item :label="$t('message.nat.jmm')" prop="oldpassword">
          <el-input
            v-model="form.oldpassword"
            :placeholder="
              $t('message.plsInput', { name: $t('message.nat.jmm') })
            "
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.nat.xmm')" prop="upwd">
          <el-input
            v-model="form.upwd"
            :placeholder="
              $t('message.plsInput', { name: $t('message.nat.xmm') })
            "
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.nat.qrxmm')" prop="confirmpassword">
          <el-input
            v-model="form.confirmpassword"
            :placeholder="
              $t('message.plsInput', { name: $t('message.nat.qrxmm') })
            "
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" v-t="'message.btnCancle'"></el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          v-t="'message.btnUpdate'"
        ></el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="$t('message.changePswqz')"
      :visible.sync="dialogVisibleQz"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="30%"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-width="80px"
        label-position="top"
        size="medium"
      >
        <el-form-item :label="$t('message.nat.jmm')" prop="oldpassword">
          <el-input
            v-model="form.oldpassword"
            :placeholder="
              $t('message.plsInput', { name: $t('message.nat.jmm') })
            "
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.nat.xmm')" prop="upwd">
          <el-input
            v-model="form.upwd"
            :placeholder="
              $t('message.plsInput', { name: $t('message.nat.xmm') })
            "
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('message.nat.qrxmm')" prop="confirmpassword">
          <el-input
            v-model="form.confirmpassword"
            :placeholder="
              $t('message.plsInput', { name: $t('message.nat.qrxmm') })
            "
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="logOut" v-t="'message.menu.logOut'"></el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          v-t="'message.btnUpdate'"
        ></el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import configSite from "@/baseconfig.js";
export default {
  name: "stuMsgCom",
  //import引入的组件需要注入到对象中才能使用
  props: {
    menu: {
      type: [Array, Object],
      default: () => {},
    },
  },
  components: {},
  data() {
    var passWord = (rule, value, callback) => {
      var rules = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,}$/;
      if (!value) {
        return callback(new Error(this.$t("message.cantEmpty")));
      } else {
        if (!rules.test(value)) {
          return callback(new Error(this.$t("message.passwordTips")));
        } else {
          callback();
        }
      }
    };
    //这里存放数据
    return {
      circleUrl: require("@/assets/img/icon_mrtx.png"),
      dialogVisible: false,
      dialogSwitch: false,
      SwitchValue: 1,
      form: {
        oldpassword: "",
        upwd: "",
        confirmpassword: "",
      },
      rules: {
        oldpassword: [
          {
            required: true,
            message: this.$t("message.cantEmpty"),
            trigger: "blur",
          },
        ],
        upwd: [
          {
            required: true,
            message: this.$t("message.cantEmpty"),
            trigger: "blur",
          },
          { validator: passWord, trigger: "blur" },
        ],
        confirmpassword: [
          {
            required: true,
            message: this.$t("message.cantEmpty"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    lang() {
      return this.$i18n.locale;
    },
    configSite() {
      return configSite;
    },
    nameBase() {
      // userInfo.givenname+'  '+userInfo.familyname
      let givenname =
        this.$store.state.userInfo.givenname != null
          ? this.$store.state.userInfo.givenname
          : "";
      let familyname =
        this.$store.state.userInfo.familyname != null
          ? this.$store.state.userInfo.familyname
          : "";
      return `${givenname} ${familyname}`;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  //   确定切换身份
  methods: {
    SwitchConfirm() {
      // 处理确定按钮点击事件
      console.log(this.SwitchValue);
      this.dialogSwitch = false;
    },
    navagator(data) {
      this.$api
        .post("/reckon/verifyMenu", {
          moduleid: data.moduleid,
        })
        .then((res) => {
          if (data.moduletype == 2 && this.userInfo.xtype == 2) {
            this.$router.push({
              name: "chooseStudent",
              params: { url: data.url, moudleid: data.moduleid },
            });
          } else {
            this.$router.push({
              name: data.url,
              query: { mid: data.moduleid },
            });
          }
          //this.$router.push({name:'chooseStudent',query:{url:data.url,moudleid:data.moduleid}})
        })
        .catch((e) => {});
    },
    handleClose() {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
    },
    logOut() {
      this.$api
        .post("/reckon/logOut", {})
        .then((res) => {
          this.$store.commit("logOut");
          this.$router.replace({ name: "login" });
        })
        .catch((e) => {});
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api
            .post("/reckon/updatePwd", { ...this.form, id: this.userInfo.id })
            .then((res) => {
              this.dialogVisible = false;
              this.$alert(
                this.$t("message.nat.xgmmcg"),
                this.$t("message.nat.czcg"),
                {
                  confirmButtonText: this.$t("message.btnConfirm"),
                  type: "success",
                  closeOnClickModal: false,
                  callback: (action) => {
                    window.location.reload();

                    this.$store.state.userInfo.isreset = "1";
                    this.$store.commit(
                      "$_setStronge",
                      this.$store.state.userInfo
                    );
                  },
                }
              );
            })
            .catch((e) => {});
        } else {
          //console.log('error submit!!');
          return false;
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.userInfo.isreset != "1") {
      this.dialogVisibleQz = true;
    } else {
      this.dialogVisibleQz = false;
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="stylus" scoped>
.stu_msg_content {
  position: relative;
  padding: 20px;
  background: #fff;

  .stu_head {
    background-position: center;
    color: $white;

    .title {
      padding: 35px;
      color: $white;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      line-height: 28px;
    }
  }

  .stu_info {
    display: flex;
    padding: 30px 0;

    .info_avatar {
      width: 170px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;

      .avatar {
        width: 100px;
        height: 100px;
        overflow: hidden;
      }

      .msg_btn, .SwitchIdentity {
        padding: 10px 10px;
        margin-top: 10px;
        margin-left: 0;
      }

      .msg_btn span, .SwitchIdiconImgentity span {
        display: flex;
        align-items: center;
      }

      . {
        margin-right: 5px;
        width: 18px;
      }
    }

    .info_msg {
      flex: 1;
      flex-grow: 1;

      .item {
        display: flex;
        height: 25%;
        align-items: center;

        .label {
          font-size: $normalSize;
          line-height: 20px;
          margin-right: 10px;
          white-space: nowrap;
        }

        .main {
          line-height: 20px;
          font-size: $normalSize;
          flex: 1;
          flex-grow: 1;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    @media screen and (max-width: 600px) {
      flex-direction: column;

      .info_avatar {
        width: auto;
      }

      .info_msg {
        margin-top: 15px;
      }
    }
  }

  .stu_quick_link {
    border-top: 1px solid $borderGray;

    .link_title {
      padding: 10px 0 0;
      color: $colorDeepPrimary;
      font-size: 20px;
      line-height: 28px;
      font-weight: 600;
    }

    .link_items {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      margin: 0 -5px;

      .item {
        width: 33.3333%;

        .word {
          margin: 10px 5px 0;
          padding: 0 15px;
          height: 56px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: $colorNormalBlue;
          color: $colorDeepPrimary;
          text-align: center;
          font-weight: 600;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
